<template>
	<view>
		
		
		<view class="cu-chat">
			<view v-for="(item,index) in chatList" :key="index">
		
				<view class="cu-item self" v-if="username == item.from_id">
					<view class="main">
						<view class="content bg-green shadow" v-if="(item.msg_type == 'image')">
							<image :src="item.image" class="radius" mode="widthFix" @click="openimage(item.msg_id)"></image>
						</view>
						<view class="content bg-green shadow" v-else>
						 <text>{{item.text}}</text>
						</view>
					</view>
					<view class="cu-avatar radius" :style="[{background: 'url('+item.avatar+')'}]"></view>
					<view class="date"> {{item.content.from_name==undefined?item.from_id:item.content.from_name}}	   {{item.time}}</view>
				</view>
				<view class="cu-item" v-else>
					<view class="cu-avatar radius" :style="[{background: 'url('+item.avatar+')'}]"></view>
					<view class="main">
						<view class="content shadow" v-if="(item.msg_type == 'image')">
							<image :src="item.image" class="radius" mode="widthFix" @click="openimage(item.msg_id)"></image>
						</view>
						<view class="content shadow" v-else>
							<text>{{item.text}}   </text> 
						</view>
					</view>
					<view class="date ">{{item.time}}     {{item.content.from_name==undefined?item.from_id:item.content.from_name}}</view>
				</view>
			</view>
		</view>
		
		
		
		
		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<!-- <view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view> -->
			<input class="solid-bottom" :adjust-position="false" 
			:focus="false" maxlength="300" cursor-spacing="10" 
			v-model="my_say_text"></input>
			<view class="action">
				<text class="cuIcon-pic text-grey" @click="to_send_pic()"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click="to_send()">发送</button>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				InputBottom: 0,
				my_say_text: '',
				chatList: [],
				chater_info:{},
				gid:"",
				nickName:""	,
				username:"",
				userinfo:{}
			}
		},
		onLoad(option){
			_this=this;
			var chater_info = uni.getStorageSync('jiguang_chater_info')
			this.chater_info = chater_info
			console.log("群聊");
			console.log(option);
			uni.setNavigationBarTitle({
			       title:option.name
			 });
			 this.gid=option.gid;
			 this.nickName=option.name;
			 this.username = uni.getStorageSync('jim_login_username')
			 
			/* //获取会话列表
			 _this.$jjim.getConversation().then(function(data){
				 console.log("会话列表");
				 console.log(data)
				 
			 }) */
			 this.$jjim.getUserInfo().then(function(data) {
			 	_this.userinfo = data.user_info
			 
			 	_this.getMsgs()
			 	// _this.loadHistory()
			 })
			 
			 
			 uni.$on('msg_ol', function(data) {
			 	console.log('收到消息，收到消息，收到消息')
			 	console.log(data)
			 	for (var i = 0; i < data.length; i++) {
			 		if (data[i].content.target_id == _this.chater_info.gid) {
			 			_this.insertData(data[i])
			 		}
			 	}
			 	_this.loadReources()
			 	_this.to_bottom()
			 })
			 
			 
			 
		},
		methods: {
			insertData(item) {
				let _this = this
				item.from_id = item.content.from_id
				item.msg_type = item.content.msg_type
				item.text = item.content.msg_body.text
				if (item.content.from_id == _this.username) {
					if(undefined != _this.userinfo.avatar){
						item.avatar = _this.userinfo.avatar
					}
				} else {
					item.avatar = _this.chater_info['avatar']
				}
				_this.chatList.push(item)
			},
			to_send() {
				var _this = this;
				if (!_this.my_say_text || _this.my_say_text == '') {
					//无内容直接跳出
					return
				}
				console.log("发送内容："+_this.my_say_text+":"+_this.gid+":"+_this.nickName)
				this.$jjim.sendGroupMsg(_this.gid, _this.nickName, _this.my_say_text).then(function(data) {
					_this.insertData(data)
					//_this.to_bottom()
					_this.my_say_text = ''
				}, function(error) {
					console.log(error)
					_this.my_say_text = ''
				})
			},
			to_send_pic() {
				let _this = this
			
				uni.chooseImage({
					count: 1,
					// sizeType:  original 原图，compressed 压缩图，默认二者都有
					sizeType: ['original', 'compressed'],
					success(res) {
						uni.showLoading({
							title: '上传中...'
						})
						let img = res.tempFilePaths[0]
			
						_this.$jjim.sendGroupPic(_this.gid, _this.nickName, img).then(function(data) {
							_this.insertData(data)
							_this.loadReources()
							_this.to_bottom()
							uni.hideLoading()
						}, function(error) {
							console.log(error)
							uni.hideLoading()
						})
					}
				})
			},
			getMsgs() {
			
				if(_this.chater_info!=null){
					let msgs = _this.$jjim.getGroupMsgs(_this.gid)
					console.log("msgs--------群聊消息历史------")
					console.log(msgs)
					if(msgs!=null){
						for (var i = 0; i < msgs.length; i++) {
							msgs[i].from_id = msgs[i].content.from_id
							msgs[i].msg_type = msgs[i].content.msg_type
							msgs[i].text = msgs[i].content.msg_body.text
							if (msgs[i].content.from_id == _this.username) {
								
								if(msgs[i].avatar!=undefined){
								   msgs[i].avatar = _this.userinfo.avatar+""
								}
							} else {
								if(msgs[i].avatar!=undefined){
								   msgs[i].avatar = _this.chater_info['avatar']
								}
								
							}
						}
									
						_this.chatList = msgs
						_this.loadReources()
						_this.to_bottom() 
					}
					
				}
			
			},
			to_bottom() {
				setTimeout(function() {
					uni.pageScrollTo({
						scrollTop: 100000,
						duration: 0
					})
				}, 200);
			},
			loadReources() {
				let _this = this
				for (var i = 0; i < _this.chatList.length; i++) {
					if (_this.chatList[i].content.msg_type == 'image' && !_this.chatList[i].image) {
						let _c = _this.chatList[i]
						// console.log('start:' + i + '-' + _this.chatList.length)
						_this.$jjim.getResurce(_this.chatList[i].content.msg_body.media_id, i).then(function(data) {
							_c.image = data.url
							_this.chatList[data.index] = _c
							_this.chatList.sort(_this.timeAsc)
						}, function(data) {
							console.log('图片加载失败：' + JSON.stringify(data))
						})
					}
				}
			}
		}
	}
</script>

<style>

</style>
